<script setup lang="ts">
  import { InputSearch, Button, Tabs, TabPane, Row, Col, Image, Spin } from '@arco-design/web-vue';
  import { ref, watch } from 'vue';
  import { queryCommunityList, querycommunity_typeModelList } from '/@/api/community_type';
  import type {
    TypeRecord,
    CommunityListParams,
    CommunityList,
  } from '/@/api/model/community_typeModel';
  // import clubIcon from '/@/assets/pins/m_club.png';

  const emits = defineEmits(['skip', 'change']);

  const typeList = ref<TypeRecord[]>([]);
  type communityTabRecord = Pick<CommunityList, 'id' | 'name' | 'focus_num' | 'logo'>;
  const communityTabListRef = ref<communityTabRecord[]>([]);
  const activeKey = ref(0);
  const loadingRef = ref(false);

  const getType = async () => {
    typeList.value = [{ id: 0, name: '推荐圈子' }];
    const result = await querycommunity_typeModelList();
    typeList.value.push(...result);
  };

  const getCommunity = async (params: CommunityListParams) => {
    loadingRef.value = true;
    try {
      const result = await queryCommunityList(params);
      communityTabListRef.value = result;
    } finally {
      loadingRef.value = false;
    }
  };

  const changeTabs = (key) => {
    communityTabListRef.value = [];
    if (key === 0) {
      getCommunity({ recommend: 0 });
    } else {
      getCommunity({ type_id: key });
    }
  };

  const handleSkip = () => {
    emits('skip');
  };

  const selectCommunity = (item: communityTabRecord) => {
    emits('change', item);
  };

  getType();

  watch(
    activeKey,
    () => {
      changeTabs(activeKey.value);
    },
    {
      immediate: true,
    },
  );
</script>
<template>
  <div class="h-full">
    <div class="pb-[16px] box-border border-b border-solid border-[rgba(0,0,0,0.2)]">
      <InputSearch placeholder="搜索圈子名称" />
    </div>
    <Tabs
      type="capsule"
      size="large"
      position="left"
      class="h-[300px]"
      v-model:active-key="activeKey"
    >
      <TabPane v-for="(typeItem, index) in typeList" :key="index">
        <template #title>{{ typeItem.name }}</template>
        <Spin class="py-[7px] min-h-[217px]" :loading="loadingRef">
          <Row
            v-for="item in communityTabListRef"
            :key="item.name"
            class="w-full cursor-pointer hover:bg-gray-300 py-[9px]"
            @click="selectCommunity(item)"
          >
            <Col :span="8">
              <Image class="mx-[15px]" width="48" height="48" :src="item.logo" />
            </Col>
            <Col :span="16">
              <div>{{ item.name }}</div>
              <div>{{ item.focus_num }}星友·{{ item.focus_num }}星点</div>
            </Col>
          </Row>
        </Spin>
      </TabPane>
    </Tabs>
    <div class="box-border text-right">
      <Button @click="handleSkip" type="outline">不选择圈子</Button>
    </div>
  </div>
</template>
